<template>
  <div class="app-container home">
    <el-row :gutter="20">
        <el-card header="校友基本数据量" style="font-weight: bold;">
            <el-table  :data="AlumneList" >
                <el-table-column label="序号" align="center" prop="xh" />
                <el-table-column label="数据类别" align="center" prop="lb" />
                <el-table-column label="数据量" align="center" prop="ts" />
            </el-table>
        </el-card>
    </el-row>
    <el-row :gutter="20">
        <el-card header="数据填报率统计" style="font-weight: bold;">
        <el-tabs tab-position="" v-model="activeName" style="height: auto;" @tab-click="handleClick">
            <el-tab-pane label="基本信息" name="first" :key="'first'">
                <el-table  :data="infoList" >
                    <el-table-column label="序号" align="center" prop="xh" />
                    <el-table-column label="字段名称" align="center" prop="mc" />
                    <el-table-column label="已填量" align="center" prop="tbl" />
                    <el-table-column label="总数量" align="center" prop="zsl" />
                    <el-table-column label="填报率" align="center" prop="bl" />
                </el-table>
            </el-tab-pane>
            <el-tab-pane label="学籍信息" name="second" :key="'second'">
                <el-table  :data="schoolList" >
                    <el-table-column label="序号" align="center" prop="xh" />
                    <el-table-column label="字段名称" align="center" prop="mc" />
                    <el-table-column label="已填量" align="center" prop="tbl" />
                    <el-table-column label="总数量" align="center" prop="zsl" />
                    <el-table-column label="填报率" align="center" prop="bl" />
                </el-table>
            </el-tab-pane>
            <el-tab-pane label="联系信息" name="third" :key="'third'">
                <el-table  :data="contactList" >
                    <el-table-column label="序号" align="center" prop="xh" />
                    <el-table-column label="字段名称" align="center" prop="mc" />
                    <el-table-column label="已填量" align="center" prop="tbl" />
                    <el-table-column label="总数量" align="center" prop="zsl" />
                    <el-table-column label="填报率" align="center" prop="bl" />
                </el-table>
            </el-tab-pane>
            <el-tab-pane label="就业信息" name="fourth" :key="'fourth'">
                <el-table  :data="employList" >
                    <el-table-column label="序号" align="center" prop="xh" />
                    <el-table-column label="字段名称" align="center" prop="mc" />
                    <el-table-column label="已填量" align="center" prop="tbl" />
                    <el-table-column label="总数量" align="center" prop="zsl" />
                    <el-table-column label="填报率" align="center" prop="bl" />
                </el-table>
            </el-tab-pane>
        </el-tabs>
        </el-card>
    </el-row>
  </div>
</template>

<script>
import { listRoll, getRoll, delRoll, addRoll, updateRoll, exportRoll } from "@/api/system/roll";
import echarts from 'echarts';

export default {
    data() {
        return {
            chart: null,
            activeName: "first",
            AlumneList: [{
                xh:'1',
                lb: '校友数据',
                ts: '121055'
            }, {
                xh:'2',
                lb: '招生类',
                ts: '183325'
            }, {
                xh:'3',
                lb: '证书发放类',
                ts: '222655'
            },{
                xh:'4',
                lb: '成绩单类',
                ts: '115972'
            },{
                xh:'5',
                lb: '毕业派遣类',
                ts: '78407'
            }],
            infoList: [{
                xh:'1',
                mc: '姓名',
                tbl: '121055',
                zsl: '121055',
                bl: '100%'
            }, {
                xh:'2',
                mc: '证件类型',
                tbl: '70175',
                zsl: '121055',
                bl: '57.97%'
            }, {
                xh:'3',
                mc: '证件代码',
                tbl: '70175',
                zsl: '121055',
                bl: '57.97%'
            },{
                xh:'4',
                mc: '性别代码',
                tbl: '120943',
                zsl: '121055',
                bl: '99.90%'
            },{
                xh:'5',
                mc: '出生日期',
                tbl: '111285',
                zsl: '121055',
                bl: '91.93%'
            },{
                xh:'6',
                mc: '名族代码',
                tbl: '72645',
                zsl: '121055',
                bl: '60.01%'
            },{
                xh:'7',
                mc: '籍贯代码',
                tbl: '68468',
                zsl: '121055',
                bl: '56.56%'
            },{
                xh:'8',
                mc: '入团日期',
                tbl: '6267',
                zsl: '121055',
                bl: '5.18%'
            },{
                xh:'5',
                mc: '入党日期',
                tbl: '17',
                zsl: '121055',
                bl: '0.00%'
            }],
            schoolList: [{
                xh:'1',
                mc: '学生类别',
                tbl: '131162',
                zsl: '131162',
                bl: '100%'
            }, {
                xh:'2',
                mc: '学制',
                tbl: '87197',
                zsl: '131162',
                bl: '66.48%'
            }, {
                xh:'3',
                mc: '入学就读学校',
                tbl: '72165',
                zsl: '131162',
                bl: '55.02%'
            },{
                xh:'4',
                mc: '学院/系',
                tbl: '128135',
                zsl: '131162',
                bl: '97.69%'
            },{
                xh:'5',
                mc: '专业',
                tbl: '129333',
                zsl: '131162',
                bl: '98.61%'
            },{
                xh:'6',
                mc: '就读学历',
                tbl: '0',
                zsl: '131162',
                bl: '0.00%'
            },{
                xh:'7',
                mc: '就读学历代码',
                tbl: '0',
                zsl: '131162',
                bl: '0.00%'
            },{
                xh:'8',
                mc: '就读学位',
                tbl: '0',
                zsl: '131162',
                bl: '0.00%'
            },{
                xh:'9',
                mc: '就读学位代码',
                tbl: '0',
                zsl: '131162',
                bl: '0.00%'
            },{
                xh:'10',
                mc: '生源所在地',
                tbl: '121868',
                zsl: '131162',
                bl: '92.91%'
            },{
                xh:'11',
                mc: '学习方式',
                tbl: '48275',
                zsl: '131162',
                bl: '44.43%'
            },{
                xh:'12',
                mc: '学习方式代码',
                tbl: '0',
                zsl: '131162',
                bl: '0.00%'
            },{
                xh:'13',
                mc: '培养方式',
                tbl: '76703',
                zsl: '131162',
                bl: '58.48%'
            },{
                xh:'14',
                mc: '培养方式代码',
                tbl: '0',
                zsl: '131162',
                bl: '0.00%'
            },{
                xh:'15',
                mc: '班级',
                tbl: '75756',
                zsl: '131162',
                bl: '57.76%'
            },{
                xh:'16',
                mc: '入学年度',
                tbl: '125693',
                zsl: '131162',
                bl: '95.83%'
            },{
                xh:'17',
                mc: '学号',
                tbl: '105175',
                zsl: '131162',
                bl: '80.19%'
            },{
                xh:'18',
                mc: '个人相片',
                tbl: '96844',
                zsl: '131162',
                bl: '73.84%'
            },{
                xh:'19',
                mc: '成绩单',
                tbl: '0',
                zsl: '131162',
                bl: '0.00%'
            },{
                xh:'20',
                mc: '学位类型',
                tbl: '0',
                zsl: '131162',
                bl: '0.00%'
            },{
                xh:'21',
                mc: '毕业证号',
                tbl: '100214',
                zsl: '131162',
                bl: '76.40%'
            },{
                xh:'22',
                mc: '学位证号',
                tbl: '60962',
                zsl: '131162',
                bl: '46.48%'
            },{
                xh:'23',
                mc: '考生号',
                tbl: '0',
                zsl: '131162',
                bl: '0.00%'
            },{
                xh:'24',
                mc: '第二专业',
                tbl: '4220',
                zsl: '131162',
                bl: '3.22%'
            },{
                xh:'25',
                mc: '第二毕业证号',
                tbl: '3343',
                zsl: '131162',
                bl: '2.55%'
            },{
                xh:'26',
                mc: '第二学位证号',
                tbl: '1601',
                zsl: '131162',
                bl: '1.22%'
            },{
                xh:'27',
                mc: '第二学院',
                tbl: '4201',
                zsl: '131162',
                bl: '3.20%'
            }],
            contactList: [{
                xh:'1',
                mc: 'QQ号',
                tbl: '0',
                zsl: '32679',
                bl: '0.00%'
            }, {
                xh:'2',
                mc: '电子邮箱',
                tbl: '0',
                zsl: '32679',
                bl: '0.00%'
            }, {
                xh:'3',
                mc: '统一身份认证号',
                tbl: '0',
                zsl: '32679',
                bl: '0.00%'
            },{
                xh:'4',
                mc: '手机号',
                tbl: '19437',
                zsl: '32679',
                bl: '59.48%'
            },{
                xh:'5',
                mc: '住址',
                tbl: '32395',
                zsl: '32679',
                bl: '99.13%'
            }],
            employList: [{
                xh:'1',
                mc: '就业单位名称',
                tbl: '64181',
                zsl: '70084',
                bl: '91.57%'
            }, {
                xh:'2',
                mc: '就业单位所在地',
                tbl: '69969',
                zsl: '70084',
                bl: '99.83%'
            }, {
                xh:'3',
                mc: '单位行业',
                tbl: '0',
                zsl: '70084',
                bl: '0.00%'
            },{
                xh:'4',
                mc: '单位性质',
                tbl: '0',
                zsl: '70084',
                bl: '0.00%'
            },{
                xh:'5',
                mc: '职位类别',
                tbl: '0',
                zsl: '70084',
                bl: '0.00%'
            }]
        };
    },
    mounted() {
        /*ECharts图表*/
        var myChart = echarts.init(document.getElementById('zscharts'));
        var bypqcharts = echarts.init(document.getElementById('bypqcharts'));
        myChart.setOption({
            title: {
                text: '招生类别',
                left: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c} ({d}%)'
            },
            series : [
            {
                name: '招生类别',
                type: 'pie',
                radius: '55%',
                itemStyle: {
                normal: {
                // 阴影的大小
                shadowBlur: 200,
                // 阴影水平方向上的偏移
                shadowOffsetX: 0,
                // 阴影垂直方向上的偏移
                shadowOffsetY: 0,
                // 阴影颜色
                shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
                },
                data:[
                    {value:852, name:'中专'},
                    {value:38298, name:'专科'},
                    {value:110658, name:'本科'},
                    {value:30447, name:'硕士'},
                    {value:2908, name:'博士'}
                ],
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
            ]
        }),
        bypqcharts.setOption({
            title: {
                text: '培养方式',
                left: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c} ({d}%)'
            },
            series : [
            {
                name: '培养方式',
                type: 'pie',
                radius: '55%',
                itemStyle: {
                normal: {
                // 阴影的大小
                shadowBlur: 200,
                // 阴影水平方向上的偏移
                shadowOffsetX: 0,
                // 阴影垂直方向上的偏移
                shadowOffsetY: 0,
                // 阴影颜色
                shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
                },
                data:[
                    {value:606, name:'在职'},
                    {value:1533, name:'委培'},
                    {value:1234, name:'定向'},
                    {value:11068, name:'统分'},
                    {value:63923, name:'非定向'},
                    {value:50, name:'自筹'},
                    {value:4, name:'联培'}
                ],
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
            ]
        })
        }
}
</script>